<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <tr>
            <td>循环下标</td>
            <td>书名</td>
            <td>作者</td>
        </tr>
        <tr v-for="(book,index) of books" v-bind:key="index">
            <td>{{index}}</td>
            <td>{{book.name}}</td>
            <td>{{book.author}}</td>
        </tr>
    </table>
    <hr>
    <div v-for="(s,p,index) in site" v-bind:key="index">{{s}}--{{p}}---{{index}}</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            books: [
                {
                    name: '三国演义',
                    author: '罗贯中'
                }, {
                    name: '红楼梦',
                    author: '曹雪芹'
                }, {
                    name: '西游记',
                    author: '吴承恩'
                }, {
                    name: '水浒传',
                    author: '施耐庵'
                }
            ],
            site: {
                url: 'www.javaboy.org',
                name: '江南一点雨',
                server: 'github'
            }
        }
    })
</script>
</body>
</html>